
<template>
  <van-nav-bar title="VueShop" />

  <van-swipe :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="(item, key) in coupon" :key="key" @click="CouponIndex(item.id)">
      <van-image  width="100%" height="auto" fit="cover" :src="item.thumb_text" />
    </van-swipe-item>
  </van-swipe>

  <van-grid :border="false" :column-num="4">
    <van-grid-item to="/product" text="全部商品">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/quanbu.png" />
     </template>
    </van-grid-item>
    <van-grid-item text="商品直播">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/zhibo.png" />
     </template>
    </van-grid-item>
    <van-grid-item to="/coupon/couponlist" text="优惠活动">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/youhui.png" />
     </template>
    </van-grid-item>
    <van-grid-item to="/product/rank" text="榜单排行">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/bangdan.png" />
     </template>
    </van-grid-item>
  </van-grid>

  <div class="type">新品推荐</div>

  <div class="list">
    <router-link v-for="(item,key) in news" :key="key" :to="{path:'/product/info', query:{proid:item.id}}" class="item">
      <div class="back">
        <img :src="item.thumb_text" />
      </div>
      <p class="price">￥{{ item.price }}</p>
    </router-link>
  </div>

  <Tabbar />
</template>

<script setup>

    import { onMounted } from 'vue';

    const {proxy} = getCurrentInstance();

    let news = ref([])

    let coupon = ref([])

    onMounted(async () => {
        var result = await proxy.$POST({
            url: '/index/index',
        })

        
        news.value = result.data.news

        coupon.value = result.data.coupon

        // console.log(result.data)

    })

    const CouponIndex = (cid) => proxy.$router.push({path:'/coupon/info',query:{cid}})
</script>

<style scoped>
  @import url('/assets/css/home.css');
</style>